Exploring the Examples

Render a page right now

To give you a feel for what a Web site consists of in Frontier, and what it means to render a Web page, Frontier comes with some examples you can experiment with immediately.

Jump to websites.samples (or get there in any way you like; one way is by choosing Websites from the Main menu). Select the entry called "randomStuff," and open it by hitting ctrl-enter or by double-clicking its triangle.

Important note: The ctrl (Control) key on Windows and the cmd (Command) key on Macintosh are equivalent. This tutorial usually refers to the ctrl or control key. If you're using a Mac, read this as the command key, unless stated otherwise.

What opens is, as the Kind column for this entry has already told you, a wp text. A wp text can be edited as in any simple word processor: you can type, cut and paste, change the font and style of selected text, adjust the width of paragraphs, and so on. (But font and style are irrelevant to the Web page rendering process, which just looks at the text as a string without formatting.)

Instead of worrying right now about what the document says, do this: leave Frontier for a moment and start up your Web browser (it should be either Netscape Navigator or Microsoft Internet Explorer).

Now come back to Frontier, make sure that websites.samples.randomStuff is the frontmost window, and, from the Web menu, choose Preview Page. After a few moments, you may be asked to locate your default web browser app on disk. Do so. Then your browser comes to the front with a Web page shown in it. This Web page was generated by "rendering" the text in websites.samples.randomStuff.

Now switch back and forth between your browser and Frontier, examining the differences between websites.samples.randomStuff and what the browser shows. The document websites.samples.randomStuff is designed to show off the main features of the rendering process, so that you can see some of what Frontier can do.

We'll quickly run through these without explaining them; the rest of this tutorial develops fairly detailed discussions on every feature demonstrated here, and much more.

By the way, there are actually not two but three representations of this Web page to consider: (1) the unrendered page inside Frontier, websites.samples.randomStuff; (2) the rendered text document containing HTML tags and other things Frontier added during rendering, which is now sitting somewhere on your hard disk; and (3) the formatted representation of those HTML instructions, which is what your browser actually shows. We're going to ignore (2) for now, though, and just concentrate on (1) and (3).

Note for MSIE/Mac users: You may be tempted, as we go along, to make changes in websites.samples.randomStuff and choose View in Browser again, to see what difference they make. But Internet Explorer doesn't always load a new version of a file automatically after you choose Preview Page; it comes to the front, but then you have to choose Refresh. (Navigator users don't usually have this inconvenience.)

A quick tour

Every paragraph of the document tells us about a different Frontier feature. Don't try to understand each feature now! Just enjoy the tour. Remember, we've got the entire remainder of this tutorial in which to study the features in detail.

In the browser, look at the window's title bar. The Web page has been named after you! (You can jump to user.prefs to change your name, initials, email address, and organization.) That happened in the first paragraph of websites.samples.randomStuff, where a "#title" for the document was declared involving user.prefs.name, which is an entry in the database where Frontier stored the name you gave it when you first started it up.

(You can navigate to user.prefs.name if you like and confirm that this is true; if you changed the value of this entry and then went back to websites.samples.randomStuff and chose Preview Page again, the resulting rendered page would have a different title.)

Scroll to the bottom of the page: the last lines in the browser show your name, your email address, and the date. This material, plus the horizontal rule that precedes it, plus the large title involving your name at the top of the page, didn't come from websites.samples.randomStuff at all: it came from a different entry in websites called #template.

Every Web page is automatically embedded into a #template as it is rendered, which gives you an opportunity to provide uniform matter to go at the start and end of each page.

It also can impose some uniform formatting; for instance, every paragraph of text (everything after the big title) is blockquoted, and this too was done by the #template.

The thing to understand is that any page living in the websites table would automatically have this sort of formatting and this sort of starting and ending matter. That's the power of a template.

Next, notice that the paragraphs from websites.samples.randomStuff have come out as separate paragraphs in the browser. As you know, this requires <p> tags, since returns alone don't cause a new line when a browser interprets HTML. But there are no <p> tags in websites.samples.randomStuff.

Frontier has inserted these <p> tags; in particular, it has put a <p> wherever it found two returns in a row in websites.samples.randomStuff.

What now? The first paragraph in the browser has a stylistic enhancement, an enlarged first letter. This was done by a "filter," in particular by websites.#filters.pagefilter.

A filter is a place where you can place commands to be run after the page is rendered, to customize the look of your page. Every Web page is passed through the filters, which again gives you an opportunity to give your pages a uniform look automatically; any page living in websites will have this enlarged first letter when it is rendered.

Do you see the green text? This comes from a <font> tag in websites.samples.randomStuff. The point is to show you that HTML tags you place in your pages in Frontier remain in the resulting HTML.

This stands in significant contrast to a typical WYSIWYG HTML-generation tool, where if you typed <font> it would appear in the browser as the literal phrase <font>, not as an HTML command, because your opening "<" would be replaced by "&lt;." A WYSIWYG tool thinks that only it should be in charge of making any HTML. Whereas Frontier tries to help you by generating some HTML if you want the help, but its basic orientation is one where you stay in manual control of your own HTML.

The third paragraph contains live links, even though we don't see this in websites.samples.randomStuff; the third and fourth paragraphs tell you why.

This feature is the "glossary": words and phrases in quotes, such as "Netscape," were replaced by the value of the corresponding entry in user.html.glossary (go ahead and look in it), and those entries, in this case, are complete anchor tags surrounding some text.

Clearly, if we know we're going to refer to "Netscape" with a live link at many places in a document or documents, this can save us a mess of typing (and from having to get the HTML exactly right every time, too).

The sixth and seventh paragraphs show how URLs and email addresses are turned into live links during the rendering process. In websites.samples.randomStuff, you see just a URL and an email address; Frontier has surrounded these with anchor tags generated from them.

In the next paragraph, the number after the words "curly braces" is generated each time the page is rendered by running the UserTalk instructions contained in curly braces in websites.samples.randomStuff.

If you return to websites.samples.randomStuff and choose Preview Page again, you'll likely see a different number in the browser when the page is rendered again, because the instructions tell Frontier to generate a random number, and Frontier obeys these instructions anew during each rendering of the page.

Anything UserTalk can do can be done as part of a Web page. That's called a "macro."

Skipping through the rest of the browser window, we see that the horizontal rule at the bottom, and the lines which follow that, are once again part of the #template.

You can examine websites.#template at this point, if you like; it may not mean a great deal to you at the moment, but comparison with what's in the browser window will give you clues as to what's going on here.

Okay, that's your lightning introduction. Next, you're going to do it for yourself.